<template>
  <div class="galary">
    <ly-tab
      class="tabColor"
      v-model="selectedId"
      :items="items"
      :options="options"
      @change="handleClick">
    </ly-tab>
    <div class="cate">
      <span>全部</span>
      <span>其他</span>
    </div>
    <component :is="type"></component>
  </div>
</template>

<script>
  import galaryContent from './galaryContent'

  export default {
    name: "detailGalary",
    data() {
      return {
        type: 'galaryContent',
        galaryList: [
          '无锡拈花客栈',
          '无锡拈花客栈',
          '无锡拈花客栈',
          '无锡拈花客栈',
          '无锡拈花客栈'
        ],
        selectedId: 0,
        items: [
          // {label: '首页'},
          // {label: '推荐'},
          // {label: 'Android'},
          // {label: '前端'},
          // {label: '后端'},
          // {label: 'iOS'},
          // {label: '产品'},
          // {label: '人工智能'},
          // {label: '设计'}
        ],
        options: {
          activeColor: '#0bc071'
          // 可在这里指定labelKey为你数据里文字对应的字段
        },
      }
    },
    methods: {
      handleClick(item, index) {
        this.$store.state.index = index;
      }
    },
    components: {
      galaryContent
    },
    computed: {
      loopGalaryList() {
        for (let i = 0; i < this.galaryList.length; i++) {
          let item = {label: this.galaryList[i]};
          this.items.push(item);
        }
      }
    },
    mounted() {
      this.loopGalaryList;
    }
  }
</script>

<style lang="stylus" scoped>
  .galary
    position: absolute
    top: .88rem
    left: 0
    right: 0
    bottom: 0
    color: #fff
    z-index: 100
    background: #fff

  .galary > a
    color: #000

  .tabColor
    background: #fff
    border-color: #fff

  .cate
    background: #edf0f5
    line-height: .6rem
    color: #000

  .cate > span:first-child
    margin-left: .22rem
    font-size: .3rem
    color: #0bc071

  .wrapper
    background: #fff

  .imgWrapper
    width: 47%
    background: red
    margin: .12rem
    float: left

  .imgWrapper > img
    width: 100%
</style>
